<template>
	<view class="service-container">
		
		<!-- 服务项目区域 -->
		<view class="service-section">
			<view class="section-title">
				<view class="title-bar"></view>
				<text class="title-text">服务申请</text>
			</view>
			
			<view class="service-grid">
				<view 
					class="service-item" 
					@click="goToSubmit('repair')"
					hover-class="service-item-hover"
					hover-stay-time="100"
				>
					<view class="item-inner">
						<view class="service-badge repair-badge">维修</view>
						<view class="service-info">
							<text class="service-name">物业报修</text>
							<text class="service-desc">设施设备维修</text>
						</view>
						<view class="item-arrow">
							<text class="arrow-text">></text>
						</view>
					</view>
				</view>
				
				<view 
					class="service-item" 
					@click="goToSubmit('complaint')"
					hover-class="service-item-hover"
					hover-stay-time="100"
				>
					<view class="item-inner">
						<view class="service-badge complaint-badge">意见</view>
						<view class="service-info">
							<text class="service-name">投诉建议</text>
							<text class="service-desc">意见反馈处理</text>
						</view>
						<view class="item-arrow">
							<text class="arrow-text">></text>
						</view>
					</view>
				</view>
				
				<view 
					class="service-item" 
					@click="goToSubmit('help')"
					hover-class="service-item-hover"
					hover-stay-time="100"
				>
					<view class="item-inner">
						<view class="service-badge help-badge">求助</view>
						<view class="service-info">
							<text class="service-name">生活求助</text>
							<text class="service-desc">特殊情况帮助</text>
						</view>
						<view class="item-arrow">
							<text class="arrow-text">></text>
						</view>
					</view>
				</view>
				
				<view 
					class="service-item"
					@click="goToHistory"
					hover-class="service-item-hover"
					hover-stay-time="100"
				>
					<view class="item-inner">
						<view class="service-badge history-badge">记录</view>
						<view class="service-info">
							<text class="service-name">历史记录</text>
							<text class="service-desc">查看申请状态</text>
						</view>
						<view class="item-arrow">
							<text class="arrow-text">></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提示区域 -->
		<view class="notice-section">
			<view class="section-title">
				<view class="title-bar notice-bar"></view>
				<text class="title-text">温馨提示</text>
			</view>
			
			<view class="notice-content">
				<view class="notice-item">
					<view class="notice-dot"></view>
					<text class="notice-text">报修服务时间: 周一至周日 8:00-18:00</text>
				</view>
				<view class="notice-item">
					<view class="notice-dot"></view>
					<text class="notice-text">紧急情况请直接拨打物业服务电话: <text class="phone-text" @click="callService">0755-12345678</text></text>
				</view>
				<view class="notice-item">
					<view class="notice-dot"></view>
					<text class="notice-text">投诉建议将在3个工作日内处理并回复</text>
				</view>
			</view>
		</view>
		
		<!-- 最近服务记录 -->
		<view class="recent-section" v-if="isLogin">
			<view class="section-title">
				<view class="title-bar recent-bar"></view>
				<text class="title-text">最近服务</text>
				<text class="title-more" @click="goToHistory">查看更多</text>
			</view>
			
			<!-- 加载中 -->
			<view class="loading-container" v-if="loading">
				<view class="loader"></view>
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 服务记录列表 -->
			<scroll-view class="recent-scroll" scroll-x v-else-if="recentServices.length > 0">
				<view class="recent-list">
					<view 
						class="recent-item" 
						v-for="(item, index) in recentServices" 
						:key="item.id"
						@click="viewServiceDetail(item.id)"
						hover-class="recent-item-hover"
					>
						<view class="recent-status" :class="getStatusClass(item.status)">
							{{getStatusText(item.status)}}
						</view>
						<view class="recent-type">{{getServiceTypeText(item.type)}}</view>
						<view class="recent-time">
							<text>{{formatDate(item.createTime)}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 无数据 -->
			<view class="empty-state" v-else>
				<text class="empty-text">暂无服务记录</text>
				<text class="empty-desc">您可以提交新的服务申请</text>
			</view>
		</view>
	</view>
</template>

<script>
// 导入服务相关API
import { getServiceList } from '@/api/service.js';

export default {
	data() {
		return {
			isLogin: false,
			recentServices: [],
			loading: false
		}
	},
	onLoad() {
		this.checkLogin();
		this.loadRecentServices();
	},
	onShow() {
		this.checkLogin();
		if (this.isLogin) {
			this.loadRecentServices();
		}
		const app = getApp();
		if (app.globalData && app.globalData.serviceListNeedRefresh) {
			console.log('从详情页返回，服务列表需要刷新');
			this.resetList();
			this.loadRecentServices();
			app.globalData.serviceListNeedRefresh = false;
		}
	},
	onPullDownRefresh() {
		if (this.isLogin) {
			this.loadRecentServices();
		}
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 检查登录状态
		checkLogin() {
			const token = uni.getStorageSync('token');
			const prevLoginState = this.isLogin;
			this.isLogin = !!token;
			
			// 如果登录状态变化并且已登录，则加载最近服务记录
			if (prevLoginState !== this.isLogin && this.isLogin) {
				this.loadRecentServices();
			}
		},
		
		// 加载最近服务记录
		async loadRecentServices() {
			this.loading = true;
			try {
				const params = {
					pageNum: 1,
					pageSize: 3
				};
				
				const res = await getServiceList(params);
				console.log('最近服务记录:', res);
				
				if (res.code === 200) {
					this.recentServices = res.data.records || [];
				} else {
					uni.showToast({
						title: res.message || '加载失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载最近服务记录失败:', error);
				uni.showToast({
					title: '网络异常，请下拉刷新重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 跳转到服务提交页面
		goToSubmit(type) {
			if (!this.isLogin) {
				this.showLoginTips();
				return;
			}
			
			uni.navigateTo({
				url: `/pages/service/submit?type=${type}`
			});
		},
		
		// 跳转到历史记录页面
		goToHistory() {
			if (!this.isLogin) {
				this.showLoginTips();
				return;
			}
			
			uni.navigateTo({
				url: '/pages/service/history'
			});
		},
		
		// 查看服务详情
		viewServiceDetail(id) {
			uni.navigateTo({
				url: `/pages/service/detail?id=${id}`
			});
		},
		
		// 拨打物业服务电话
		callService() {
			uni.makePhoneCall({
				phoneNumber: '075512345678',
				fail: (err) => {
					console.error('拨打电话失败', err);
					uni.showToast({
						title: '拨打电话失败',
						icon: 'none'
					});
				}
			});
		},
		
		// 显示登录提示
		showLoginTips() {
			uni.showModal({
				title: '提示',
				content: '请先登录',
				confirmText: '去登录',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				}
			});
		},
		
		// 获取服务类型文本
		getServiceTypeText(type) {
			const typeMap = {
				'0': '物业报修',
				'1': '投诉建议',
				'2': '生活求助'
			};
			return typeMap[type] || '其他服务';
		},
		
		// 获取服务状态文本
		getStatusText(status) {
			const statusMap = {
				0: '待处理',
				1: '处理中',
				2: '已完成',
				3: '已取消'
			};
			return statusMap[status] || '未知状态';
		},
		
		// 获取状态样式类
		getStatusClass(status) {
			const statusClassMap = {
				0: 'status-pending',
				1: 'status-processing',
				2: 'status-completed',
				3: 'status-cancelled'
			};
			return statusClassMap[status] || '';
		},
		
		// 格式化日期
		formatDate(dateStr) {
			if (!dateStr) return '';
			
			const date = new Date(dateStr);
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
		},
		
		/**
		 * 重置列表状态
		 */
		resetList() {
			// 重置分页和列表数据
			this.page = 1;
			this.loadMore = true;
			this.serviceList = [];
		}
	}
}
</script>

<style lang="scss" scoped>
.service-container {
	min-height: 100vh;
	background-color: #f7f8fa;
	padding-bottom: 30rpx;
}

/* 顶部banner样式 */
.banner {
	position: relative;
	height: 360rpx;
	overflow: hidden;
}

.banner-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
	transform: scale(1.05);
}

.banner-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}

.banner-title {
	position: absolute;
	left: 40rpx;
	bottom: 80rpx;
	font-size: 46rpx;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
	z-index: 2;
}

.banner-subtitle {
	position: absolute;
	left: 40rpx;
	bottom: 40rpx;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	z-index: 2;
}

/* 通用section样式 */
.service-section, 
.notice-section, 
.service-guide, 
.recent-section {
	margin: 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
	animation: fadeIn 0.5s ease-out;
	overflow: hidden;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	position: relative;
}

.title-bar {
	width: 6rpx;
	height: 32rpx;
	background: linear-gradient(to bottom, #3498db, #2980b9);
	border-radius: 3rpx;
	margin-right: 16rpx;
}

.notice-bar {
	background: linear-gradient(to bottom, #ff9500, #f39c12);
}

.recent-bar {
	background: linear-gradient(to bottom, #9c88ff, #8c7ae6);
}

.title-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.title-more {
	font-size: 26rpx;
	color: #3498db;
	margin-left: auto;
	display: flex;
	align-items: center;
}

.title-more::after {
	content: '>';
	margin-left: 6rpx;
	font-size: 24rpx;
}

/* 服务网格样式 */
.service-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10rpx;
}

.service-item {
	width: calc(50% - 20rpx);
	margin: 10rpx;
	border-radius: 16rpx;
	overflow: hidden;
	transition: all 0.3s;
	position: relative;
}

.item-inner {
	background-color: #f8f9fa;
	border-radius: 16rpx;
	padding: 30rpx;
	display: flex;
	height: 100%;
	transition: all 0.3s;
	position: relative;
}

.service-badge {
	width: 64rpx;
	height: 64rpx;
	border-radius: 12rpx;
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.repair-badge {
	background: linear-gradient(135deg, #3498db, #2980b9);
}

.complaint-badge {
	background: linear-gradient(135deg, #ff9500, #f39c12);
}

.help-badge {
	background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.history-badge {
	background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.service-item-hover .item-inner {
	background-color: #e6f2ff;
	transform: scale(0.97);
}

.service-item-active .item-inner {
	background-color: #e6f7ff;
	box-shadow: 0 0 0 2rpx #3498db inset;
}

.service-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.service-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.service-desc {
	font-size: 24rpx;
	color: #999;
}

.item-arrow {
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.6;
}

.arrow-text {
	font-size: 24rpx;
	color: #999;
}

/* 提示区域样式 */
.notice-content {
	background-color: #fffbeb;
	border-radius: 16rpx;
	padding: 24rpx;
}

.notice-item {
	display: flex;
	margin-bottom: 20rpx;
	align-items: flex-start;
}

.notice-item:last-child {
	margin-bottom: 0;
}

.notice-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background-color: #ff9500;
	margin-right: 16rpx;
	margin-top: 14rpx;
}

.notice-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
	flex: 1;
}

.phone-text {
	color: #3498db;
	text-decoration: underline;
}

/* 最近服务记录样式 */
.recent-scroll {
	width: 100%;
}

.recent-list {
	display: flex;
	padding: 10rpx 0;
}

.recent-item {
	min-width: 260rpx;
	max-width: 300rpx;
	background-color: #f8f9fa;
	padding: 24rpx;
	margin-right: 20rpx;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	transition: all 0.3s;
}

.recent-item-hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08);
}

.recent-status {
	position: absolute;
	top: 16rpx;
	right: 16rpx;
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	color: #fff;
}

.status-pending {
	background: linear-gradient(to right, #f39c12, #f1c40f);
}

.status-processing {
	background: linear-gradient(to right, #3498db, #2980b9);
}

.status-completed {
	background: linear-gradient(to right, #2ecc71, #27ae60);
}

.status-cancelled {
	background: linear-gradient(to right, #95a5a6, #7f8c8d);
}

.recent-type {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-top: 30rpx;
	margin-bottom: 16rpx;
}

.recent-time {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #999;
}

/* 加载和空状态 */
.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
}

.loader {
	width: 40rpx;
	height: 40rpx;
	border: 3rpx solid rgba(52, 152, 219, 0.1);
	border-left-color: #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.loading-text {
	font-size: 24rpx;
	color: #999;
	margin-top: 16rpx;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
}

.empty-text {
	font-size: 30rpx;
	font-weight: bold;
	color: #999;
	margin-bottom: 10rpx;
}

.empty-desc {
	font-size: 24rpx;
	color: #b2b2b2;
}
</style> 